<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /* border: 10px solid red; */
            padding: 10px;
            margin-bottom: 20px;

            /* box-sizing 用来设置盒子尺寸的计算方式（设置width,和height的作用）
             box-sizing: border-box;  盒子大小包括边框；宽高设置 可见框 大小 */
            /* box-sizing: content-box;  盒子大小不包括边框；默认值，宽高设置内容区的大小；*/

            /* 边框圆角
                border-radius: 20%; 10px / 40px; 10px; 10px 20px 30px;
                border-top-left-radius: 30px;
            */
            border-radius: 10px 20px;

        }

        /* 轮廓和圆角 
            轮廓用法和Border一样；区别：轮阔不会影响可见狂的大小，设置后，整个元素不会向下挤；
            一般在鼠标悬浮的时候给一个效果；
        */
        /* 阴影 
            1值 水平偏移量 正右 负左 不可省略
            2   垂直偏移量 正右 负左 不可省略
            3   阴影的模糊半径 值越大模糊的越真实
            4   阴影颜色 可以用rgba 搞透明的
        */

        .box1:hover {
            outline: 10px solid pink;
            box-shadow: 50px 50px 10px rgba(0, 0, 0, .5);
        }

        /* 浮动
            浮动会脱离文档流，只在父元素内浮动，且高度不会超过兄弟元素的高度，水平方向不会超过它前面兄弟元素的位置，按顺序来的；
            要想调整顺序，则调整元素的位置；

            浮动脱离文档流后 下面上去的文字不会被挡住，有图片环绕文字效果；
            块元素 浮动脱离文档流后 块元素不在独占页面的一行 且块元素的高度和宽度被内容撑开；
            行内元素 脱离文档流后 可以设置宽高；

            即，脱离文档流后，元素不区分块元素和行内元素了；
        */
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            /* border: 10px solid red; */
            padding: 10px;
            float: right;
        }

        .box3 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            /* border: 10px solid red; */
            padding: 10px;
            float: right;
        }


        .box4 {
            width: 100px;
            height: 100px;
            background-color: #bfa;
            /* border: 10px solid red; */
            padding: 10px;
            float: right;
        }

        .box5 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /* border: 10px solid red; */
            padding: 10px;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

    <div class="box4">
        <!-- <div class="box5"> -->

    </div>
    </div>
</body>

</html>